<template>
  <div class="hello" style="background-color:#F8F9F9;">
    <!--头部图片div层-->
    <div >
      <ImageTop></ImageTop>
    </div>
    <br>
    <!--控件div层-->
    <div class="container-fluid" style="background-color:#F8F9F9;">
      <div class="card">
        <div class="card-body mb-3">
          <!--昵称-->
          <b-input-group prepend="昵称:" class="mt-3">
            <b-form-input v-model="userData.username"></b-form-input>
          </b-input-group>
          <!--密码-->
          <b-input-group prepend="密码:" class="mt-3">
            <b-form-input type="password" v-model="userData.password"></b-form-input>
          </b-input-group>
          <!--手机-->
          <b-input-group prepend="手机:" class="mt-3">
            <b-form-input type="text" v-model="userData.phone"></b-form-input>
          </b-input-group>
          <!--性别-->
          <b-input-group prepend="性别:" class="mt-3">
            <select class="form-control" v-model="userData.sex">
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </b-input-group>
          <!--生日-->
          <b-input-group prepend="生日:" class="mt-3">
            <input type="date" class="form-control" v-model="userData.birthdayStr">
          </b-input-group>
          <div class="mb-2" style="color: red"> <small>生日信息一旦提交不予更改！</small></div>
          <!--提交按钮-->
          <div class="form-inline">
            <button type="button" class="btn btn-success col-6 mt-3" v-on:click="editInfo">提交</button>
            <button type="button" class="btn btn-light col-6 mt-3" @click="$router.push('/MemberCenter')">返回</button>
          </div>


        </div>
      </div>
    </div>

    <!--底部版权所有层-->
  </div>
</template>

<script>
import service from "@/utils/axios";
export default {
  name: "MyInformation",
  data() {
    return {
      userData: {}
    }
  },
  methods: {
    editInfo: function (){
      if (this.userData.birthday != null){
        service.put("/myInfo/editInfo",{
          id: this.userData.id,
          username: this.userData.username,
          password: this.userData.password,
          sex: this.userData.sex
        }).then(data => {
          alert(data.data.msg)
          this.queryById();
        })
      }else {
        service.put("/myInfo/editInfo",{
          id: this.userData.id,
          username: this.userData.username,
          password: this.userData.password,
          sex: this.userData.sex,
          birthdayStr: this.userData.birthdayStr
        }).then(data => {
          alert(data.data.msg)
          this.queryById();
        })
      }


    },
    queryById: function (){
      service.get("/queryById").then(data => {
        this.userData = data.data.data;

        console.log(this.userData.birthdayStr)

      })
    }
  },
  created() {
    this.queryById();
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

}
